
<meta charset="utf-8">
<style>
    *{
        padding: 0;
        margin: 0;
    }
    a{
        text-decoration: none;
        color: black;
        font-size: 18px;
    }
    li{
        list-style: none;
        float: left;
        height: 36px;
        line-height: 36px;
        margin: 6px;
    }
    li:first-child{
        margin-right:50px; 
    }
    li:nth-of-type(15){
        margin-left:50px; 
    }
    img{
        vertical-align: middle;
    }
    .box{
        background: linear-gradient(to bottom, #FFFFFF, rgba(204, 204, 204, 0.4));
        height:70px;
        padding-top:30px; 
    }
    ul{
        width: 1080px;
        margin: 0 auto;
    }
    a:hover{
        color:red;
    }
    .pic1 {
        transition: all .6s ease-in-out;
    }
    .pic1:hover{
        transform: rotate(360deg);
    }
    @keyframes spread{
        0% {width:0;}
        33% {width:23px;}
        66% {width:46px;}
        100% {width:69px;}
    }
    .li1,.li2{
        position: relative;
    }
    .pic2{
        position:absolute;
        left:0;
        top:-14px;
        width:40px;
        height: 24px;
        background: url("images/header_03.png") no-repeat;
        
    }
    .pic3{
        position:absolute;
        left:0;
        top:-14px;
        width:40px;
        height: 24px;
        background: url("images/header_07.png") no-repeat;
        
    }
    .li1:hover .pic2{
        background: url("images/header_05.png") no-repeat;
        animation: spread .6s linear both;  
    }
    .li2:hover .pic3{
        background: url("images/header_09.png") no-repeat;
        animation: spread .6s linear both;  
    }
</style>
<div class="box">
    <ul>
        <li><img src="images/logo_170x46.png"/></li>
        <li class="li1">
            <a href="#">返回商城</a>
            <span class="pic2"></span>
        </li>
        <li>|</li>
        <li><a href="#">商旅频道</a></li>
        <li>|</li>
        <li class="li2">
            <a href="#">积分商城</a>
            <span class="pic3"></span>
        </li>
        <li>|</li>
        <li><a href="#">商旅频道</a></li>
        <li>|</li>
        <li><a href="#">了解彩贝</a></li>
        <li>|</li>
        <li><a href="#">彩贝活动</a></li>
        <li>|</li>
        <li><a href="#">个人中心</a></li>
        <li><img class="pic1" src="images/iconsB_11.gif"></li>
        <li><img class="pic1" src="images/iconsB_12.gif"></li>
        <li><img class="pic1" src="images/iconsB_13.png"></li>
    </ul>
</div>